<template>
    <div class="content-main">
        <div v-if="!toExamisShow" class="register-content">
            <div class="main-top">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card shadow="never" class="userModel">
                            <div style="width: 100%;display: flex;justify-content: space-between;">
                                <div class="user-img">
<!--                                    <el-avatar shape="square" :size="60" :src="Avatar ? Avatar:squareUrl"></el-avatar>-->
                                    <img width="80px" height="99.43px" ref="Avatar" :src="Avatar ? Avatar:squareUrl">
                                </div>
                                <div class="user">
                                    <div class="user-name">
                                        <p class="name">{{person.name}} <i :class="person.gender_display == '男'?'iconfont icon-xingbienan':'iconfont icon-xingbienan-copy'"></i></p>
                                    </div>
                                    <div>
                                        <p><i class="iconfont icon-shengriyingxiao"></i> {{person.birthday}}</p>
                                    </div>
                                    <div>
                                        <p><i class="iconfont icon-shouji"></i> {{person.phone}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="user-describe">
                                <div>
                                    <i class="iconfont icon-zhengjianleixing"></i> {{person.card_type_display}}
                                </div>
                                <div>
                                    <i class="iconfont icon-shenfenzheng"></i> {{person.card_id}}
                                </div>
                                <div>
                                    <i class="iconfont icon-youxiang"></i> {{person.email}}
                                </div>
                                <div>
                                    <i class="iconfont icon-zhuzhi_chengshi"></i> {{person.address}}
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="10">
                        <el-card shadow="never" class="informModel">
                            <div slot="header" class="inform">
                                <span>公告通知</span>
                                <el-button style="float: right; padding: 3px 0" type="text">更多+</el-button>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="never" class="flowModel">
                            <div slot="header" class="flow">
                                <span>报名流程</span>
                                <el-button style="float: right;" size="mini" @click="registerVisible = true">添加报名</el-button>
                            </div>
                            <p class="flow-describe">
                                1.登录。考生登录“中小学教师资格考试网”(http://ntce.neea.edu.cn),查看所在省报名公告,按照导航页面指引进入所在省报名入口。
                                2.注册。考生须认真阅读、充分了解本省报考要求后方可进行。注册时要求考生填写报名公告规定的证件号码、姓名、手机号码、登录密码等信息,并在网站认真阅读《诚信考试承诺书》(电子版),确认承诺后方可进行后续操作。
                            </p>
                        </el-card>
                        <el-dialog
                                title="新建报名"
                                :visible.sync="registerVisible"
                                width="50%"
                                :before-close="addRegisterClose">
                            <register-form :isNotFirstRegister="false" @registerForm="addOrg"
                                           :registerParams="profile" style="text-align: left"></register-form>
                        </el-dialog>
                    </el-col>
                </el-row>
            </div>
            <div class="main-bottom">
                <el-row :gutter="20">
                    <el-col :span="10" class="athor-left">
                        <div class="athor">
                            <el-card shadow="never" class="school-content">
                                <div>
                                    <div class="title">学校信息</div>
                                    <div class="content">
                                        <p>学校: <span v-if="person.school">{{person.school}}</span><span v-else>---</span><span class="end">学历: <span
                                                v-if="person.hig_edu">{{person.hig_edu}}</span><span v-else>---</span></span></p>
                                        <p>专业: <span v-if="person.major">{{person.major}}</span><span v-else>---</span></p>
                                        <p>毕业: <span v-if="person.grad_time">{{person.grad_time}}</span><span v-else>---</span></p>
                                    </div>
                                </div>
                            </el-card>
                            <el-card shadow="never" class="work-content">
                                <div>
                                    <div class="title">工作信息</div>
                                    <div class="content">
                                        <p>工作单位: <span v-if="person.com_name">{{person.com_name}}</span><span v-else>---</span></p>
                                        <p>职务: <span v-if="person.work_duty">{{person.work_duty}}</span><span v-else>---</span></p>
                                        <p>工作年限: <span v-if="person.work_age">{{person.work_age}}</span><span v-else>---</span>年</p>
                                        <p>职称技能: <span v-if="person.work_title">{{person.work_title}}</span><span v-else>---</span></p>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="14" class="athor-right">
                        <el-drawer
                                title="编辑信息"
                                size="50%"
                                :visible.sync="drawer"
                                :direction="direction"
                                :before-close="ExamhandleClose">
                            <el-card style="text-align: left">
                                <el-form ref="updateForm" :model="form" :rules="formRules" label-width="100px">
                                    <div>
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item prop="name" label="姓名:">
                                                    <el-input :disabled="userDisable" v-model="form.name"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item label="性别:">
                                                    <el-radio-group :disabled="userDisable" v-model="form.gender">
                                                        <el-radio label="m">男</el-radio>
                                                        <el-radio label="f">女</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="10">
                                                <el-form-item label="出生日期:">
                                                    <!--                                        <el-input v-model="form.birthday"></el-input>-->
                                                    <el-date-picker :disabled="userDisable" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                                                                    placeholder="选择日期" v-model="form.birthday"
                                                                    style="width: 100%;"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item label="证件类型:">
                                                    <el-select :disabled="userDisable" v-model="form.card_type" placeholder="请选择证件类型">
                                                        <el-option v-for="item in cardOptions" :key="item.id" :label="item.name"
                                                                   :value="item.id"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item prop="card_id" label="证件号码:">
                                                    <el-input  :disabled="userDisable" v-model="form.card_id"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item prop="email" label="邮箱:">
                                                    <el-input :disabled="userDisable" v-model="form.email"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="9">
                                                <el-form-item label="考试城市:">
                                                    <!--                                        <el-input v-model="form.exam_city"></el-input>-->
                                                    <el-select v-model="form.exam_city" placeholder="请选择证件类型">
                                                        <el-option v-for="item in examDate" :key="item.id"
                                                                   :label="item.exam_city"
                                                                   :value="item.exam_city"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item label="单位:">
                                                    <el-input v-model="form.com_name"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="9">
                                                <el-form-item label="职务:">
                                                    <el-input v-model="form.work_duty"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item label="现居省份:">
                                                    <el-cascader
                                                            size="large"
                                                            :options="areaOptions"
                                                            v-model="selectedOptions"
                                                            @change="addressChange">
                                                    </el-cascader>
                                                </el-form-item>
                                            </el-col>
                                            <el-col>
                                                <el-form-item label="是否购书:">
                                                    <el-switch v-model="form.buy_book" active-text="是" inactive-text="否">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="详细地址:">
                                                    <el-input type="textarea" autosize v-model="form.address"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div v-show="form.state_code >= 4">
                                        <el-row>
                                            <el-col :span="7">
                                                <el-form-item label="姓拼音:">
                                                    <el-input v-model="form.first_py"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="7">
                                                <el-form-item label="名拼音:">
                                                    <el-input v-model="form.last_py"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="毕业学校:">
                                                    <el-input v-model="form.school"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="10">
                                                <el-form-item label="毕业时间:">
                                                    <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                                                                    placeholder="选择日期" v-model="form.grad_time"
                                                                    style="width: 100%;"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">
                                                <el-form-item label="最高学历:">
                                                    <el-select v-model="form.hig_edu" placeholder="最高学历">
                                                        <el-option label="硕士研究生" value="硕士研究生"></el-option>
                                                        <el-option label="博士" value="博士"></el-option>
                                                        <el-option label="本科" value="本科"></el-option>
                                                        <el-option label="大专" value="大专"></el-option>
                                                        <el-option label="中专/职技校" value="中专/职技校"></el-option>
                                                        <el-option label="高中" value="高中"></el-option>
                                                        <el-option label="其他" value="其他"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="专业门类:">
                                                    <el-input v-model="form.major"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">
                                                <el-form-item label="单位名称:">
                                                    <el-input v-model="form.com_name"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="7">
                                                <el-form-item label="从业年限:">
                                                    <el-input type="number" v-model="form.work_age"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">
                                                <el-form-item label="现有职称:">
                                                    <el-input v-model="form.work_title"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="10">
                                                <el-form-item label="现有职务:">
                                                    <el-input v-model="form.work_duty"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">
                                                <el-form-item label="职务英文:">
                                                    <el-input v-model="form.work_duty_en"></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">
                                                <el-form-item label="证件照:">
                                                    <img-upload :url="form.photo" @upload="updateUpload"></img-upload>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="10">
                                                <!--                                    <el-form-item label="激活日期">-->
                                                <!--                                        <el-input v-model="form.active_date"></el-input>-->
                                                <!--                                    </el-form-item>-->
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="10">
                                                <el-form-item label="考试时间">
                                                    <el-select v-model="form.exam_date" placeholder="请选择考试时间">
                                                        <!--                                            <el-option v-for="item in form.course.examdate" :key="item.id"-->
                                                        <!--                                                       :label="item.exam_date"-->
                                                        <!--                                                       :value="item.exam_date"></el-option>-->
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <el-form-item>
                                        <el-button type="primary" @click="editContent">立即修改</el-button>
                                        <el-button @click="editHandleClose">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>
                        </el-drawer>
                        <div class="exam">
                            <el-scrollbar style="height: 100%">
                                <el-card v-for="item in profile" shadow="never" class="examModel" :key="item.id">
                                    <div style="width: 100%;text-align: right">
                                        <el-button size="mini" :disabled="(item.state_code < 3)||(item.state_code < 7 && item.exam_date) ? false : true" @click="updateExam(item.id)">编辑</el-button>
                                    </div>
                                    <el-row>
                                        <el-col :span="10">
                                            <div class="left">
                                                <div class="title"><span class="head">报考信息:</span> {{item.course.name}}</div>
                                                <div class="content">
                                                    <p>考试城市: {{item.exam_city}}</p>
                                                    <p>考试时间: {{item.exam_date}}</p>
                                                    <p>购买教程: {{item.buy_book ? '已购买':'未购买'}}</p>
                                                    <p>审核状态: {{state_map[item.state_code]}}</p>
                                                    <p>备注信息: <span v-if="isReject[item.state_code].includes('reject')">{{item.note}}</span></p>
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="14">
                                            <div class="right">
                                                <div class="title">报考机构: {{item.org.org_name}} ({{item.org.org_code}})</div>
                                                <div class="content">
                                                    <p>账号信息: {{item.gaodun_p}} --- {{item.gaodun_u}}</p>
                                                    <p>考试时间: {{item.exam_date}}</p>
                                                    <p>有效期限: {{item.exp_date}}</p>
                                                    <p>准考证号: {{item.exam_code}}</p>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <div style="width: 100%;text-align: right" v-if="(!item.school && !item.exam_date &&item.state_code > 3)||(item.exam_list[item.exam_list.length-1]&&item.exam_list[item.exam_list.length-1]['is_pass']===false)">
                                        <el-button size="mini" @click="toExam(item.id)">{{(item.exam_list[item.exam_list.length-1]&&item.exam_list[item.exam_list.length-1]['is_pass']===false) ? '点击补考':'点击报考'}}</el-button>
                                    </div>
                                </el-card>
                            </el-scrollbar>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div v-if="toExamisShow" class="exam animate__animated animate__zoomIn">
            <div class="exam-header">
                <el-card>
                    <el-page-header @back="goBack" content="详情页面">
                    </el-page-header>
                </el-card>
                <el-card>
                    <el-form label-position="right" ref="examForm" :rules="rules" label-width="120px" :model="examForm">
                        <el-steps align-center :active="active" finish-status="success">
                            <el-step title="步骤 1"></el-step>
                            <el-step title="步骤 2"></el-step>
                            <el-step title="步骤 3"></el-step>
                        </el-steps>
                        <div style="padding: 20px;text-align: left;">
                            <div v-show="active == 1">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="name" label="姓名:">
                                            <el-input v-model="examForm.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="last_py" label="姓拼音:">
                                            <el-input v-model="examForm.last_py"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item prop="first_py" label="名拼音:">
                                            <el-input v-model="examForm.first_py"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="证件类型:">
                                            <el-select v-model="examForm.card_type" placeholder="请选择证件类型">
                                                <el-option v-for="item in cardOptions" :key="item.id" :label="item.name"
                                                           :value="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="9">
                                        <el-form-item label="证件号码:">
                                            <el-input v-model="examForm.card_id"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="出生日期:">
                                            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                                                            placeholder="选择日期" v-model="examForm.birthday"
                                                            style="width: 100%;"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="家庭住址:">
                                            <el-input type="textarea" autosize v-model="examForm.address"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="school" label="毕业学校:">
                                            <el-input v-model="examForm.school"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="9">
                                        <el-form-item prop="grad_time" label="毕业时间:">
                                            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                                                            placeholder="选择日期" v-model="examForm.grad_time"
                                                            style="width: 100%;"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="hig_edu" label="最高学历:">
                                            <el-select v-model="examForm.hig_edu" placeholder="最高学历">
                                                <el-option label="硕士研究生" value="硕士研究生"></el-option>
                                                <el-option label="博士" value="博士"></el-option>
                                                <el-option label="本科" value="本科"></el-option>
                                                <el-option label="大专" value="大专"></el-option>
                                                <el-option label="中专/职技校" value="中专/职技校"></el-option>
                                                <el-option label="高中" value="高中"></el-option>
                                                <el-option label="其他" value="其他"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="9">
                                        <el-form-item prop="major" label="专业门类:">
                                            <el-input v-model="examForm.major"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-show="active == 2">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="单位名称:">
                                            <el-input v-model="examForm.com_name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item prop="work_duty" label="现有职务:">
                                            <el-input v-model="examForm.work_duty"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="现有职务英文:">
                                            <el-input v-model="examForm.work_duty_en"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item prop="work_title" label="现有职称:">
                                            <el-input v-model="examForm.work_title"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="work_age" label="从业年限:">
                                            <el-input type="number" v-model="examForm.work_age"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-show="active == 3">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item label="机构:">
                                            <el-input v-model="examForm.org.org_code"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <!--                                    <el-col :span="8">-->
                                    <!--                                        <el-form-item prop="course" label="考试级别:">-->
                                    <!--                                            <el-input v-model="examForm.course.id"></el-input>-->
                                    <!--                                        </el-form-item>-->
                                    <!--                                    </el-col>-->
                                    <el-col :span="9">
                                        <el-form-item prop="exam_date" label="考试时间:">
                                            <el-select v-model="examForm.exam_date" placeholder="请选择考试时间">
                                                <el-option v-for="item in examDate" :key="item.id"
                                                           :label="item.exam_date"
                                                           :value="item.exam_date"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="exam_city" label="考试城市:">
                                            <el-select v-model="examForm.exam_city" placeholder="请选择证件类型">
                                                <el-option v-for="item in examDate" :key="item.id"
                                                           :label="item.exam_city"
                                                           :value="item.exam_city"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item style="text-align: left" label="是否参加培训:">
                                            <el-switch
                                                    v-model="examForm.is_train"
                                                    active-color="#13ce66">
                                            </el-switch>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <el-form-item label="证件照:">
                                            <img-upload :url="examForm.photo" @upload="upload"></img-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col>
                                        <el-form-item label="电子签名:">
                                            <el-input v-model="examForm.sign"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-form-item prop="phone" label="手机号码:">
                                            <el-input v-model="examForm.phone"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item prop="code" label="短信验证码">
                                            <div style="display: flex;">
                                                <el-input v-model="examForm.code"></el-input>
                                                <el-button>
                                                    <tencent-captcha ref="captcha"
                                                                     :phone="examForm.phone"
                                                                     scene="2"></tencent-captcha>
                                                </el-button>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-form>
                    <el-button v-if="active > 1 && active < 4" style="margin-top: 12px;" @click="pre">上一步</el-button>
                    <el-button v-if="active < 3" style="margin-top: 12px;" @click="next">下一步</el-button>
                    <el-button v-if="active == 3" style="margin-top: 12px;" @click="examReg">提交</el-button>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import registerForm from "../../../components/registerForm/registerForm";
    import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data'
    import {getProfile, exam_reg, get_n_Org, editContent, courselist,examDateByCourseId} from "../../../request/api";
    import TencentCaptcha from "../../../components/TencentCaptcha/TencentCaptcha";
    import imgUpload from "../../../components/imgUpload/imgUpload";
    import 'animate.css'
    import '@/assets/icon/iconfont.css'
    export default {
        name: "contentMain",
        data(){
            var card_id_rule = (rule, value, callback) => {
                if (this.form.card_type == 1) {
                    let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                    if (value === '') {
                        callback(new Error('请填写身份证号码'));
                    } else if (!reg.test(value)) {
                        callback(new Error('身份证格式错误'))
                    } else {
                        callback();
                    }
                } else if (this.form.card_type == 2) {
                    let reg = /^1[45][0-9]{7}|([P|p|S|s]\d{7})|([S|s|G|g]\d{8})|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8})|([H|h|M|m]\d{8，10})$/
                    if (value === '') {
                        callback(new Error('请填写护照'));
                    } else if (!reg.test(value)) {
                        callback(new Error('护照格式错误'))
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            var phoneRule = (rule, value, callback) => {
                let phoneRule = /^1[23456789]\d{9}$/;
                if (value === '') {
                    callback(new Error('请输入手机号码'));
                } else if (!phoneRule.test(value)) {
                    callback(new Error('手机号码格式错误'))
                } else {
                    callback();
                }
            };
            var email_rule = (rule, value, callback) => {
                let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (value === '') {
                    callback(new Error('请填写电子邮箱'));
                } else if (!reg.test(value)) {
                    callback(new Error('电子邮箱格式错误'))
                } else {
                    callback();
                }
            };
            return{
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",//头像
                direction: 'rtl',//编辑表单label方向
                drawer: false,//控制编辑表单的显示隐藏
                active:1,//报考表单默认步骤一
                toExamisShow: false,//控制报考表单的显示隐藏
                registerVisible: false,//控制添加报名表单显示隐藏
                profile: [],//档案数组
                person: {},//个人信息对象
                courseList: [],//考试城市切换(薪酬管理师)
                state_map: {
                    0: '机构一审驳回',
                    1: '机构一审待审',
                    2: '机构一审待审',
                    3: '总部一审待审',
                    4: '总部一审待审',
                    5: '机构二审待审',
                    6: '机构二审待审',
                    7: '总部二审待审',
                    8: '全部审核通过'
                },//审核状态字典
                rules: {
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    last_py: [
                        {required: true, message: '请输入姓拼音', trigger: 'blur'}
                    ],
                    first_py: [
                        {required: true, message: '请输入名拼音', trigger: 'blur'}
                    ],
                    card_type: [
                        {required: true, message: '请选择证件类型', trigger: 'change'}
                    ],
                    card_id: [
                        {required: true, message: '请输入证件号码', trigger: 'blur'}
                    ],
                    birthday: [
                        {
                            required: true, message: '请输入出生年月', trigger: 'blur'
                        }
                    ],
                    address: [
                        {
                            required: true, message: '请输入家庭住址', trigger: 'blur'
                        }
                    ],
                    org_code: [
                        {required: true, message: '请输入机构代码', trigger: 'blur'}
                    ],
                    school: [
                        {required: true, message: '请输入学校名称', trigger: 'blur'}
                    ],
                    grad_time: [
                        {required: true, message: '请填写毕业时间', trigger: 'change'}
                    ],
                    hig_edu: [
                        {required: true, message: '请填写最高学历', trigger: 'blur'}
                    ],
                    major: [
                        {required: true, message: '请输入专业门类', trigger: 'blur'}
                    ],
                    com_name: [
                        {required: true, message: '请输入单位名称', trigger: 'blur'}
                    ],
                    work_duty: [
                        {required: true, message: '请输入现有职务', trigger: 'blur'}
                    ],
                    work_title: [
                        {required: true, message: '请输入现有职称', trigger: 'blur'}
                    ],
                    work_age: [
                        {required: true, message: '请填写从业年限', trigger: 'change'}
                    ],
                    course: [
                        {required: true, message: '请输入考试级别', trigger: 'blur'}
                    ],
                    exam_date: [
                        {required: true, message: '请填写考试时间', trigger: 'change'}
                    ],
                    exam_city: [
                        {required: true, message: '请填写考试城市', trigger: 'change'}
                    ],
                    is_train: [
                        {required: true, message: '请选择是否参加培训', trigger: 'change'}
                    ],
                    photo: [
                        {required: true, message: '请上传证件照', trigger: 'blur'}
                    ],
                    phone: [
                        {validator: phoneRule, trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入手机验证码', trigger: 'blur'}
                    ]
                },//报考表单验证
                formRules: {
                    card_id: [
                        {required: true, validator: card_id_rule, trigger: 'blur'}
                    ],
                    email: [
                        {required: true, validator: email_rule, trigger: 'blur'}
                    ],
                },//编辑表单验证
                examForm: {
                    name: '',//姓名
                    last_py: '',//姓拼音
                    first_py: '',//名拼音
                    card_type: 1,//证件类型
                    card_id: '',//证件号码
                    birthday: '',//出生日期
                    address: '',//家庭住址
                    org: {
                        org_code: '',//机构代码
                    },
                    school: '',//毕业学校
                    grad_time: '',//毕业时间
                    hig_edu: '',//最高学历
                    major: '',//专业门类
                    com_name: '',//单位名称
                    work_duty: '',//现有职务
                    work_duty_en: '',//现有职务英文
                    work_title: '',//现有职称
                    work_age: '1',//从业年限
                    course: {
                        id: '', //考试级别,
                        name: ''
                    },
                    exam_date: '',//考试时间
                    exam_city: '',//考试城市 (薪酬管理师)
                    is_train: false,//是否参加培训 (薪酬管理师)
                    photo: "",//上传证件照片
                    sign: '',//电子签名
                    phone: '',//手机号码
                    code: '',//手机验证码
                },//报考表单字段
                cardOptions: [{id: 1, name: '居民身份证'}, {id: 2, name: '护照'}, {id: 3, name: '港澳台胞身份证'}],//证件类型字典
                examDate:[],//考试时间与地点
                form:{},//编辑表单
                areaOptions: provinceAndCityData,//省市区三级联动
                selectedOptions: [],//选择后的省市区对象数组
                isReject: {
                    '0': 'org_1_reject',
                    '1': 'org_1_wait',
                    '2': 'admin_1_reject',
                    '3': 'admin_1_wait',
                    '4': 'org_2_reject',
                    '5': 'org_2_wait',
                    '6': 'admin_2_reject',
                    '7': 'admin_2_wait',
                    '8': 'allpass'
                },
                Avatar_hight:null
            }
        },
        methods:{
            //获取档案
            getProfile() {
                getProfile().then(res => {
                    res.sort((a,b) =>{
                        return a.add_time - b.add_time;
                    })
                    this.profile = res;
                    for (let item of res) {
                        if (item.state_code > 7) {
                            this.person = item;
                            return
                        }
                    }
                    // console.log('length',res.length)
                    this.person = res[res.length-1];
                    console.log('this.person', this.person)
                })
            },
            //获取考试城市列表(薪酬管理师)
            CourseList() {
                courselist().then(res => {
                    let arr = []
                    for (let item of res) {
                        for (let item2 of item.examdate) {
                            arr.push(item2['exam_city'])
                        }
                    }
                    this.courseList = arr
                    console.log('this.courseList', this.courseList);
                })
            },
            //N次报名
            addOrg(params) {
                console.log('params', params)
                get_n_Org(params).then(res => {
                    console.log(res);
                    this.registerVisible = false;
                    this.getProfile();
                }).catch(err => {
                    this.$message({
                        type: 'error',
                        message: err.msg
                    })
                })
            },
            //添加报名表单隐藏
            addRegisterClose(done) {
                done();
            },
            //去报考
            toExam(profile_id) {
                this.active = 1;
                this.toExamisShow = true;
                let _this = this;
                console.log('profile_id', profile_id);
                for (let item of this.profile) {
                    if (item.id === profile_id) {
                        this.examForm = item
                        _this.getExamDate(this.examForm.course.id);
                    }
                }
                console.log('this.examForm', this.examForm)
            },
            //报考返回主页
            goBack() {
                console.log('返回');
                this.toExamisShow = false;
            },
            //步骤上一步
            pre() {
                if (this.active-- < 2) this.active = 1
            },
            //步骤下一步
            next() {
                if (this.active++ > 3) this.active = 1;
            },
            //报考表单提交
            examReg() {
                this.$refs['examForm'].validate((valid) => {
                    if (valid) {
                        if(this.examForm.is_train){
                            this.examForm['course_id'] = this.examForm.course.id;
                            this.examForm['org_code'] = this.examForm.org.org_code;
                            console.log(this.examForm);
                            exam_reg(this.examForm).then(res => {
                                console.log(res);
                                this.$message({
                                    type: "success",
                                    message: "提交成功"
                                })
                                this.toExamisShow = false;
                                this.getProfile();

                            }).catch(err => {
                                this.$refs['captcha'].isShow = true
                                console.log('catch', err)
                                this.$message({
                                    type: 'error',
                                    message: err.msg + err.errors
                                })
                            })
                        }else{
                            this.$message({
                                type:"warning",
                                message:"请确认是否参加培训"
                            })
                        }
                    } else {
                        this.$message({
                            type: "warning",
                            message: "请检查是否漏写字段"
                        })
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //上传组件内容回调赋值给报考表单photo字段(报考)
            upload(photo) {
                this.examForm.photo = photo;
            },
            //上传组件内容回调赋值给报考表单photo字段(编辑)
            updateUpload(photo) {
                this.form.photo = photo;
            },
            //获取考试城市与考试时间(根据课程id)
            getExamDate(course_id){
                examDateByCourseId(course_id).then(res =>{
                    console.log('考试时间与地点',res)
                    this.examDate = res;
                })
            },
            //打开编辑表单并赋值
            updateExam(exam_id) {
                this.drawer = true
                console.log(exam_id);
                for (let item of this.profile) {
                    if (item.id == exam_id) {
                        this.form = JSON.parse(JSON.stringify(item))
                        this.selectedOptions.push(TextToCode[this.form.province].code,TextToCode[this.form.province][this.form.city].code);
                        this.oldForm = JSON.parse(JSON.stringify(this.form));
                        this.getExamDate(this.form.course.id);
                    }
                }
                console.log('exam_id', exam_id)
            },
            //编辑表单的关闭
            ExamhandleClose(done) {
                console.log('修改关闭');
                this.getProfile();
                done();
            },
            //获取省市区
            addressChange(arr) {
                this.form.province = CodeToText[arr[0]];
                this.form.city = CodeToText[arr[1]];
            },
            //修改信息
            editContent() {
                this.$refs['updateForm'].validate((valid) => {
                    if (valid) {
                        console.log('oldForm', this.oldForm, 'newForm', this.form);
                        let params = {'pid': this.form.id};
                        for (let item in this.oldForm) {
                            if (this.form[item] !== this.oldForm[item]) {
                                if (Object.prototype.toString.call(this.form[item]) === '[object Object]') {
                                    continue;
                                }
                                params[item] = this.form[item];
                            }
                        }
                        let cardObj = {
                            card_id:this.form.card_id,
                            card_type:this.form.card_type,
                            name:this.form.name
                        }
                        for (let key in params){
                            if(cardObj.hasOwnProperty(key)){
                                Object.assign(params,cardObj)
                            }
                        }
                        console.log('params', params)
                        editContent(params).then(res => {
                            console.log(res);
                            this.$message({
                                type: "success",
                                message: "修改成功"
                            })
                            this.drawer = false;
                            this.getProfile();
                        }).catch(err => {
                            let resetForm = JSON.parse(JSON.stringify(this.oldForm))
                            this.form = resetForm;
                            this.person = this.oldForm;
                            this.$message({
                                type: "error",
                                message: err.msg
                            })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //取消修改
            editHandleClose() {
                this.drawer = false;
                this.getProfile();
            },
            //头像高度
            AvatarHight(){
                console.log('this.$refs.Avatar',this.$refs.Avatar.width / 0.714)
            }
        },
        computed:{
            //用户部分字段禁用
            userDisable(){
                if(this.form.state_code >= 4 && this.oldForm.card_type == 1){
                    return true
                }
                return false
            },
            //头像
            Avatar(){
                return this.person.photo
            },
        },
        components:{
            registerForm,
            imgUpload,
            TencentCaptcha
        },
        created() {
            this.getProfile();
            this.CourseList();
            this.$nextTick(() =>{
                this.AvatarHight();
            })
        },
    }
</script>

<style>
    .el-scrollbar__wrap{
        /*overflow: hidden;*/
        overflow-y: scroll;
    }
</style>

<style scoped>
    .icon-xingbienan{
        color: #409EFF;
        font-size: 20px;
        font-size: 20px;
    }
    .icon-xingbienan-copy{
        font-size: 20px;
        color: #e89abe;
    }
    .examModel{
        margin-bottom: 6px;
        background-color: #F7F7F7;
    }
    .exam{
        height: 100%;
    }
    .exam .left{
        text-align: left;
    }
    .exam .right{
        text-align: left;
    }
    .exam .right .title{
        font-size: 15px;
        font-weight: 600;
        color: #8c939d;
        line-height: 17px;
    }
    .exam .right .content{
        margin-left: 40px;
        margin-top: 10px;
        font-size: 15px;
        color: #8c939d;
        line-height: 25px;
    }
    .exam .left .content{
        margin-left: 20px;
        margin-top: 10px;
        font-size: 15px;
        color: #8c939d;
        line-height: 25px;
    }
    .exam .left .title{
        font-size: 15px;
        font-weight: 600;
        color: #000000;
        line-height: 17px;
    }
    .exam .left .title .head{
        font-size: 17px;
        font-weight: 600;
        color: #000000;
    }
    .athor{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .athor-left{
        height: 100%;
    }
    .athor-right{
        height: 100%;
    }
    .school-content .title{
        font-size: 17px;
        font-weight: 600;
        width: 100%;
        text-align: left;
    }
    .school-content .content{
        margin-left: 20px;
        margin-top: 10px;
        font-size: 14px;
        width: 100%;
        text-align: left;
        line-height: 30px;
    }
    .school-content .content .end{
        margin-left: 30px;
    }
    .work-content .title{
        font-size: 17px;
        font-weight: 600;
        width: 100%;
        text-align: left;
    }
    .work-content .content{
        margin-left: 20px;
        margin-top: 10px;
        font-size: 14px;
        width: 100%;
        text-align: left;
        line-height: 30px;
    }
    .work-content .content .end{
        margin-left: 30px;
    }
    .userModel{
        background-color: #E5E5E5;
        color: #B2B2B2;
    }
    .informModel{
        background-color: #F7F7F7;
    }
    .flowModel{
        background-color: #F7F7F7;
    }
    .content-main {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        background-color: #FFFAFA;
        color: white;
    }

    .register-content {
        padding: 10px;
    }

    .user-img {
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .user {
        width: 65%;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 99.43px !important;
    }
    .user > div{
        display: flex;
        align-items: center;
    }

    .user > .user-name > .name {
        font-size: 19px;
        font-weight: 600;
        color: #000000;
    }

    .user-describe {
        text-align: left;
    }

    .user-describe div {
        margin: 10px 0px;
    }

    .inform {
        display: flex;
        justify-content: space-between;
    }

    .inform > span {
        font-size: 17px;
        font-weight: 700;
        color: #E1305A;
    }

    .flow {
        display: flex;
        justify-content: space-between;
    }

    .flow > span {
        font-size: 17px;
        font-weight: 700;
        color: #8D4B8B;
    }

    .flow-describe {
        word-wrap: break-word;
        text-align: left
    }

    .main-bottom{
        width: 100%;
        margin-top: 20px;
    }
    .school-content{
        background-color: #D1D3EB;
    }
    .work-content{
        background-color: #D8EDD3;
    }
</style>
